<template>
  <div class="search-wrap">
    <div class="search-lab" @click="openSearch">
      <i class="weui-icon-search"></i>
      <span>搜索</span>
    </div>
    <div v-transfer-dom>
      <popup v-model="serachShow" height="100%">
        <div class="search-box">
          <div class="search-bar">
            <div class="search-form">
              <i class="weui-icon-search i-search"></i>
              <input ref="searchIpt" type="search" autocomplete="off" class="search-ipt" v-model="searchKey" autofocus="autofocus">
            </div>
            <a href="javascript:" class="btn btn-ok" v-if="selectArr.length > 0" @click="resultOk">确定</a>
            <a href="javascript:" class="btn btn-cancel" v-else @click="resultCanel">取消</a>
          </div>
          <div class="search-list">
            <div class="result-nodata" v-if="!searchResult.length">
             未搜索到相关专业
            </div>
            <ul v-else>
              <li :class="[item.mlevel == '本科' ? 'b' : 'z']" v-for="(item, idx) in searchResult" :key="idx" @click="resultClick(item, idx)">
                {{item.name}} ({{item.mlevel=='本科'?'本':'专'}})
                <i class="weui-icon-success-no-circle i-success" v-if="item.cur"></i>
              </li>
            </ul>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import { Popup, TransferDom } from 'vux'
import Api from '@/api/index.js'
export default {
  directives: {
    TransferDom
  },
  components: {
    Popup
  },
  props: ['examType'],
  data () {
    return {
      serachShow: false,
      searchResult: [],
      searchKey: null,
      selectArr: []
    }
  },
  created () {
    this.searchKeyword()
  },
  watch: {
    searchKey () {
      this.searchKeyword()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.setFocus()
    })
  },
  methods: {
    // 专业查询
    searchKeyword () {
      let qsData = {name: this.searchKey}
      if (this.examType === 2) {
        Api.getArtCategory(qsData).then(res => {
          this.getResult(res)
        })
      } else {
        Api.getCategory(qsData).then(res => {
          this.getResult(res)
        })
      }
    },
    // 查询结果
    getResult (res) {
      this.searchResult = res.data.array
      this.selectArr = []
    },
    // search选择结果
    resultClick (item, idx) {
      if (item.cur) {
        item.cur = 0
        this.selectArr = this.selectArr.filter((obj) => {
          return obj.code !== item.code
        })
      } else {
        item.cur = 1
        let _name = item.name + '(' + (item.mlevel === '本科' ? '本' : '专') + ')'
        this.selectArr.push({name: _name, code: item.code})
      }
      this.$set(this.searchResult, idx, item)
    },
    resultCanel () {
      this.serachShow = false
      this.searchKey = null
      this.$emit('searchCallback', this.selectArr)
    },
    resultOk () {
      this.serachShow = false
      this.searchKey = null
      this.$emit('searchCallback', this.selectArr)
    },
    delSearchItem (item) {
      this.searchResult.map((obj, idx) => {
        if (obj.code === item.code) {
          let _item = obj
          _item.cur = 0
          return _item
        }
      })
    },
    setFocus () {
      this.$refs.searchIpt.focus()
    },
    openSearch () {
      this.serachShow = true
      this.setFocus()
      this.selectArr = []
      this.searchResult.map((obj, idx) => {
        let _item = obj
        _item.cur = 0
        return _item
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.search-lab{
  background-color: #eee;
  line-height: .96rem;
  border-radius: .133333rem;
  text-align: center;
  color: #9B9B9B;
  font-size: 14px;
}
.search-box{
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
  height: 100%;
  .search-bar{
    width: 100%;
    padding: .213333rem /* 8/37.5 */ .4rem /* 15/37.5 */;
    .search-form{
      padding: .106667rem !important;
      position: relative;
      border: 1px solid #D7D6DC;
      border-radius: .133333rem /* 5/37.5 */;
      height: .96rem /* 36/37.5 */;
      width: 8rem /* 300/37.5 */;
      .i-search{
        position: absolute;
        left: .133333rem !important;
        top: 0;
        line-height: .853333rem /* 32/37.5 */;
        z-index: 9;
      }
      .search-ipt{
        border: none;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding-left: .8rem;
        font-size: 14px;
        padding-right: .3rem;
        border-radius: .133333rem /* 5/37.5 */;
      }
    }
    .btn{
      font-size: 13px;
      position: absolute;
      right: .4rem /* 15/37.5 */;
      top: .213333rem /* 8/37.5 */;
      line-height: .906667rem /* 34/37.5 */;
      padding: 0 .133333rem /* 5/37.5 */;
      &.btn-cancel{
        color: #f00;
      }
      &.btn-ok{
        color: #59CF7D;
      }
    }
  }
  .search-list{
    li{
      font-size: 14px;
      padding: .266667rem /* 10/37.5 */ .4rem /* 15/37.5 */;
      position: relative;
      &.b{
        background-color: #ffeff0;
      }
      &.z{
        background-color: #edfbfe;
      }
      &:before{
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #D9D9D9;
        color: #D9D9D9;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        left: 0;
      }
      .i-success{
        position: absolute;
        right: .4rem /* 15/37.5 */;
      }
    }
  }
}
.result-nodata{
  font-size: 14px;
  color: #666;
  padding: 1.333333rem 0 0;
  text-align: center;
}
</style>
